<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-handle">

            </div>

            <div class="layout-container-form-search">
                <div>
                    <el-select v-model="page.po.status" placeholder="状态" clearable @change="getTableData" filterable>
                        <el-option v-for="item in statusList" :label="item.name" :value="item.value" />
                    </el-select>
                </div>

                <div>
                    <el-select v-model="page.po.siteId" placeholder="站点" clearable @change="getTableData" filterable>
                        <el-option v-for="item in siteIdList" :label="item" :value="item" />
                    </el-select>
                </div>

                <div>
                    <el-input v-model="page.po.gardenId" placeholder="gardenId" clearable />
                </div>

                <div>
                    <el-button type="primary" :icon="Search" @click="getTableData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @getTableData="getTableData">
                <el-table-column type="index" label="列表" width="50" />

                <el-table-column prop="gardenName" label="名称" align="left">
                    <template #default="scope">
                        <el-link type="success" @click="viewManage(scope.row)">{{ scope.row.gardenName }}</el-link> &nbsp;
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="创建时间" width="200" :formatter="(row)=>moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')" />
                <el-table-column prop="beginDate" label="开始时间" width="200" :formatter="(row)=>row.beginDate?moment(row.beginDate).format('YYYY-MM-DD'):''" />
                <el-table-column prop="endDate" label="结束时间" width="200" :formatter="(row)=>row.endDate?moment(row.endDate).format('YYYY-MM-DD'):''" />
                <el-table-column prop="spiderCount" label="爬取总评论数" width="200" />
                <el-table-column prop="siteId" label="网站" width="200" />
                <el-table-column prop="realCount" label="入库评论数" width="200" />
                <el-table-column prop="status" label="状态" width="200" :formatter="(row)=>statusList.find(one=>one.value===row.status)?.name" />
                <el-table-column label="操作" align="center" fixed="right" width="100">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="respiderData(scope.row)">导出</el-button>
                    </template>
                </el-table-column>
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onActivated, reactive, ref} from 'vue'
import {logPage, respider}          from "@/api/spiderLog"
import {Search,}                    from '@element-plus/icons-vue'
import Table                        from '@/components/table/index.vue'
import router                       from "@/router";
import moment                       from "moment";

function viewManage({gardenName}: any) {
    router.push({
        path : "/garden/manage",
        query: {
            gardenName: gardenName,
        }
    })
}

let statusList = [
    {name: '待爬取', value: 0,},
    {name: '爬取中', value: 1,},
    {name: '爬取成功', value: 2,},
    {name: '爬取失败', value: 3,},
]

let siteIdList = [
    "qunaer",
    "ctrip",
    "tongcheng",
    "dianping",
]

interface PageInterface {
    current: any,
    size: any,
    total: any,
    orders: any,
    po: any,
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    orders : [{column: "id", asc: false}],
    po     : {
        gardenId: null,
        status  : null,
        siteId  : null,
    },
})

const loading   = ref(true)
const tableData = ref([])

/**
 * 获取表格数据
 * @author mbb
 */
const getTableData = () => {
    loading.value = true

    let pageQuery = Object.assign({}, page)
    delete pageQuery.total
    logPage(pageQuery).then(res => {
        tableData.value = res.data.records
        page.current    = res.data.current
        page.total      = res.data.total
    }).finally(() => {
        loading.value = false
    })
}

const respiderData = function (data: object) {
    respider(data).then(() => {

    }).finally(() => {
        loading.value = false
    })
}

function init() {
    return new Promise(resolve => {
        page.po.gardenId = router.currentRoute.value.query.gardenId || null
        resolve("ok")
    })
}

// -----------------------------主程序start-----------------------------------------
onActivated(() => {
    init().then(getTableData)
})
// -----------------------------主程序end-----------------------------------------

</script>

<style>

</style>

